<template>
  <div class="explainText">
    <p>
      通过属性 default-label 及事件 @on-set-default-options（仅用于 multiple
      模式），可以为远程搜索设置默认的 label。
    </p>
  </div>
  <div style="display: flex; width: 700px; justify-content: space-between">
    <e-select
      style="width: 300px"
      v-model="model"
      filterable
      :remote-method="remoteMethod3"
      default-label="北京"
      :loading="loading3"
    >
      <e-option
        v-for="(option, index) in options3"
        :value="option.value"
        :key="index">{{ option.label }}</e-option
      >
    </e-select>
    <e-select
      style="width: 300px"
      v-model="model1"
      multiple
      filterable
      :remote-method="remoteMethod4"
      :default-label="['北京', '深圳']"
      :loading="loading4"
      @on-set-default-options="setDefaultOptions"
    >
      <e-option
        v-for="(option, index) in options4"
        :value="option.value"
        :key="index">{{ option.label }}</e-option
      >
    </e-select>
  </div>
</template>
<script>
export default {
  data() {
    return {
      model: 'beijing',
      options3: [],
      loading3: false,
      model1: ['beijing', 'shenzhen'],
      options4: [],
      loading4: false,
      list2: [
        {
          value: 'beijing',
          label: '北京',
        },
        {
          value: 'shanghai',
          label: '上海',
        },
        {
          value: 'shenzhen',
          label: '深圳',
        },
        {
          value: 'hangzhou',
          label: '杭州',
        },
        {
          value: 'guangzhou',
          label: '广州',
        },
      ],
    }
  },
  methods: {
    remoteMethod3(query) {
      if (query !== '') {
        this.loading3 = true
        setTimeout(() => {
          this.loading3 = false
          this.options3 = this.list2.filter(
            (item) => item.label.indexOf(query) > -1
          )
        }, 200)
      } else {
        this.options3 = []
      }
    },
    remoteMethod4(query) {
      if (query !== '') {
        this.loading4 = true
        setTimeout(() => {
          this.loading4 = false
          this.options4 = this.list2.filter(
            (item) => item.label.indexOf(query) > -1
          )
        }, 200)
      } else {
        this.options4 = []
      }
    },
    setDefaultOptions(options) {
      this.options4 = options
    },
  },
}
</script>
<style>
.explainText {
  /* display: flex; */
  font-size: 14px;
  color: #9013fe;
  margin: 10px 0px;
}
.explainText > p {
  font-size: 14px;
  color: #6f7d96;
  padding-left: 10px;
}
</style>
